html,
body {
    height: 100%;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    overflow-y: hidden;
}

.joint-type-devs text {
    text-transform: uppercase;
    font-weight: 800;
    font-family: "Source Sans Pro", sans-serif;
}

.joint-type-devs .body {
    fill: #ffffff;
    stroke: #31d0c6;
    stroke-width: 6px;
}

.joint-type-devs .label {
    fill: #31d0c6;
    font-size: 16px;
}

.joint-type-devs .port-body {
    stroke: #ffffff;
    stroke-width: 3px;
    fill: #7c68fc;
}

.joint-type-devs .port-body:hover {
    opacity: 1;
    fill: #ff7e5d;
}

.joint-type-devs .port-label {
    fill: #7c68fc;
    text-decoration: none;
}

.joint-type-devs.joint-type-devs-atomic .body {
    stroke: #feb663;
}

.joint-type-devs.joint-type-devs-atomic .label {
    fill: #feb663;
}

/* highlighting */

.highlighted-parent .body {
    stroke: #fe854f;
    transition: stroke 1s;
}

.highlighted-parent .label {
    fill: #fe854f;
    transition: fill 1s;
    text-decoration: underline;
}

.joint-type-devs .joint-highlight-stroke {
    stroke: #ff7e5d;
    stroke-width: 6px;
    pointer-events: none;
}
